<template>
	<view class="content">
		<screen @screen="open" class="screen" :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick">
		</screen>

		<u-popup :closeable="true" :show="show" @close="close" @open="open" :round="14">
			<view class="popup">
				<p class="title">全部筛选</p>
				<view class="popup-item">
					<p>综合</p>
					<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="radioClick">
						</u-tag>
					</view>
					<!-- <u-tag
            text="价格升序"
            bg-color="#F4F4F4"
            size="large"
            color="#131313"
            border-color="#F4F4F4"
          ></u-tag>
          <u-tag
            text="价格降序"
            bg-color="#F4F4F4"
            size="large"
            color="#131313"
            border-color="#F4F4F4"
          ></u-tag> -->
				</view>
				<view class="popup-item">
					<p>价格区间</p>
					<cj-slider class="slider" v-model="priceValue" :min="0" :max="1000" :step="100" :blockWidth="40"
						@start="blockStart" @moving="blockMoving" @end="blockEnd" inactiveColor="#F4F4F4"
						activeColor="#016FDD" height="8" />
					<view class="u-page__tag-item" v-for="(item, index) in priceValueList" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="radioClick1">
						</u-tag>
					</view>
				</view>
				<view class="popup-item">
					<p>销量</p>
					<view class="u-page__tag-item" v-for="(item, index) in gdList" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="radioClick2">
						</u-tag>
					</view>
				</view>

				<view class="btn">
					<button class="clear" @click="returns">重置</button>
					<!-- <u-button shape="circle"> 重置</u-button> -->
					<button class="add" @click="show = false">确定</button>
					<!-- <u-button
            style="width: 490px"
            type="primary"
            color="linear-gradient(to right, #0096FF, #003DB1)"
            shape="circle"
            @click="show = false"
            >确定
          </u-button> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import screen from "@/components/Collapse/screen.vue";
	import {
		show
	} from "@/assets/js";
	import CjSlider from "@/components/jxs-slider.vue";

	export default {
		components: {
			CjSlider,
			screen,
		},

		data() {
			return {
				radios: [{
						name: "价格升序",
						checked: true,
					},
					{
						name: "价格降序",
						checked: false,
					},
				],
				gdList: [{
						name: "由高到低",
						checked: true,
					},
					{
						name: "由低到高 ",
						checked: false,
					},
				],
				priceValue: [18, 40], // 可以指定默认值
				priceValueList: [{
						name: "100以下",
						checked: true,
					},
					{
						name: "300以下",
						checked: false,
					},
					{
						name: "600以下",
						checked: false,
					},
					{
						name: "1000以下",
						checked: false,
					},
					{
						name: "1000以下",
						checked: false,
					},
				],
				show: false,
				titleArr: ["综合", "最新", "价格", "销量"],
				dropArr: [
					[{
						text: "综合",
						value: "0",
					}, ],
					[{
							text: "不限",
							value: "0",
						},
						{
							text: "最新",
							value: "1",
						},
						{
							text: "最热",
							value: "2",
						},
					],

					[{
							text: "不限",
							value: "0",
						},
						{
							text: "价格升序",
							value: "1",
						},
						{
							text: "价格降序",
							value: "2",
						},
					],
					[{
							text: "不限",
							value: "0",
						},
						{
							text: "销量升序",
							value: "1",
						},
						{
							text: "销量降序",
							value: "2",
						},
					],

					[{
						text: "不限",
						value: "0",
					}, ],
				],
				filterResultData: [],
			};
		},
		methods: {
			radioClick(name) {
				console.log(name);
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false;
				});
			},
			radioClick1(name) {
				this.priceValueList.map((item, index) => {
					item.checked = index === name ? true : false;
				});
			},
			radioClick2(name) {
				this.gdList.map((item, index) => {
					item.checked = index === name ? true : false;
				});
			},
			returns() {
				//  this.radios[]
				this.radioClick(0);
				this.radioClick1(0);
				this.radioClick2(0);
			},
			open() {
				this.show = true;
				// console.log('open');
			},
			close() {
				this.show = false;
				// console.log('close');
			},
			blockStart() {
				// console.log('滑动触发')
			},
			blockMoving() {
				console.log("正在滑动中", this.priceValue);
			},
			blockEnd() {
				console.log("滑动结束", this.priceValue);
			},
			finishClick(resultData) {
				this.filterResultData = resultData;
				this.$emit("finishDropClicks", resultData);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		// margin-top: 28rpx;
		display: flex;
		align-items: center;
		// margin-bottom: 28rpx;
	}

	.screen {
		width: 100%;
	}

	.popup {
		color: #131313;
		min-height: 800rpx;
		padding: 40rpx;

		.title {
			text-align: center;
			margin-top: -20rpx;
			font-size: 32rpx;
			font-weight: 500;
		}

		.btn {
			display: flex;
			margin: 40rpx 0;
			justify-content: space-between;
			gap: 40rpx;

			button {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.clear {
				width: 204rpx;
				height: 88rpx;
				gap: 0px;
				border-radius: 44rpx;
				border: 1px 0px 0px 0px;
				opacity: 0px;
				border: 1px solid #eeeeee;
			}

			.add {
				width: 456rpx;
				height: 88rpx;
				gap: 0px;
				border-radius: 44rpx;
				opacity: 0px;
				background: linear-gradient(270deg, #003db1 0%, #0096ff 100%);
				color: #fff;
			}
		}

		.popup-item {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 30rpx;

			p {
				width: 100%;
				padding: 30rpx 0;
				font-size: 32rpx;
				font-weight: 500;
			}

			.tag {
				width: 30%;
				text-align: center;
			}

			.slider {
				width: 100%;
				margin: 30rpx 0;
			}
		}
	}
</style>